<!-- 水电表记录 -->
<template>
	<view class="Water_record" >

		<view class="bh-select-t">
			<view class="search-box">
				<view class="search">
					<u-icon name="search" color="#999999"></u-icon>
					<input type="text" :value="searchVal" placeholder="搜索" style="padding-left: 16rpx"
						@input="searchFn" />
				</view>
			</view>
			<view class="select_t">
				<!-- 				<view class="select_col">
					位置
					<u-icon name="arrow-down" size="14" class="wicon"></u-icon>
				</view> -->
				<view class="select_col" :class="tabIndex == item.txt ? 'select_t_ac' : ''"
					@click="changeTab(item.val)" v-for="(item, index) in categorOption" :key="index">
					{{ item.txt }}
				</view>
			</view>
		</view>

		<view class="meter_list">
			<mescroll-body class="water_scroll"  ref="mescrollRef" @init="mescrollInit" :down="downOption"
				@down="downCallback" @up="upCallback">
				<view class="water_list_col xb-card" v-for="(item, index) in dataList" :key="index"
					@click="goEnergyInfo(item)">
					<view class="water_list_col_l">
						<view>{{ item.parkNum }}{{ item.buildingNum }} I
							{{ item.meterNum }}
						</view>
						<view>
							<text>{{ meterCategory[item.category].txt }}</text>
							<text>数值：{{ item.currentValue }}</text>
						</view>
					</view>
					<view class="water_list_col_r">
						<u-icon name="arrow-right" size="20" color="#666666" class="wicon"></u-icon>
					</view>
				</view>
			</mescroll-body>
		</view>

		<!-- 位置选择s -->
		<!-- 		<u-select v-model="selectShow" mode="mutil-column-auto" :list="chooseList.slice(3,chooseList.length)"
			@confirm="selectConfirm" label-name="name"></u-select> -->
		<!-- 位置选择e -->
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	// import {apiNewList} from "@/api/mock.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
					categorOption: null,
				tabIndex: '总表',
				searchVal:'',
				downOption: {
					page: {
						num: 0,
						size: 10,
						time: null,
					},
					auto: false,
				},
				categoryList: ['总表', '考核表', '私表'],
				dataList: [],
				placeList: [],
				queryParams: {
					category: '总表',
					meterType: '水表'
				},
				meterTypeNum: 0,
				meterCategory: null,
			};
		},
		onLoad(e) {
			if (e.type == '1') {
				this.queryParams.meterType = '电表'
				uni.setNavigationBarTitle({
					title: '电表资料'
				})
			} else {
				this.queryParams.meterType = '水表'
				uni.setNavigationBarTitle({
					title: '水表资料'
				})
			}

			this.apis.commonApi.getDict("meter_category").then((res) => {
				this.categorOption = this.dictFilter(res.data);
			});

			this.getDict();
			this.meterTypeNum = e.type;
		},
		methods: {
			getDict() {
				//联网加载数据
				this.apis.commonApi
					.getDict("meter_category")
					.then((res) => {
						this.meterCategory = this.dictFilter(res.data);
						console.log("this.meterCategory=", this.meterCategory);
					})
					.catch(() => {
						//联网失败的回调,隐藏下拉刷新的状态
					});
			},
			// 确定详细信息的跳转
			goEnergyInfo(row) {
				this.$store.commit("energy/setCheckMeter", row);
				this.navTo("/pagesEnergy/hydroelectric/Details?meterId=" + row.id);
			},

			changeTab(val) {
				this.tabIndex = val;
				this.queryParams.category = val
				this.dataList = [];
				this.mescroll.resetUpScroll();
			},
			selectPlace() {},
			searchFn(e) {
				this.dataList = [];
				this.searchVal = e.detail.value;
				clearTimeout(this.searchTimout);
				this.searchTimout = setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 1000);
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.dataList = []
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.apis.energyApi
					.nyMeterAccount({
						pageNum: page.num,
						pageSize: page.size,
						// currentCheckDate:"2021-10",
						meterType: this.queryParams.meterType,
						category: this.queryParams.category,
						meterNum: this.searchVal
					})
					.then((res) => {
						this.dataList = this.dataList.concat(res.rows);
						this.mescroll.endBySize(res.rows.length, res.total);
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.water_t {
		z-index: 2;
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		padding: 22rpx 40rpx;
		left: 0;
		width: 100vw;
		background: #ffffff;
		display: flex;

		.water_col {
			box-sizing: border-box;
			min-width: 152rpx;
			margin-left: 20rpx;
			height: 46rpx;
			background: #f2f2f2;
			border-radius: 24rpx;
			font-size: 24rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #333333;
			@include flexCenter;

			&:first-child {
				margin-left: 0;
			}
		}

		.water_t_ac {
			background: rgba(68, 217, 75, 0.1);
			border: 1rpx solid #44d94b;
			color: #44d94b;
		}
	}

	.wicon {
		padding-top: 2rpx;
		height: 100%;
		margin-left: 12rpx;
		@include flexCenter;
	}

	.water_list_col {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 148rpx;
		background-color: #fff;
		box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 12rpx;
		margin-bottom: 20rpx;

		.water_list_col_l {
			width: 100%;
			padding-right: 32rpx;

			view:nth-child(1) {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}

			view:nth-child(2) {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 36rpx;
			}
		}
	}

	.bh-select-t {
		position: fixed;
		z-index: 999;

		.search-box {
			box-sizing: border-box;
			padding: 20rpx;
			padding-bottom: 0;
			top: 0;
			left: 0;
			width: 100vw;
			background-color: #fff;
			display: flex;
			align-items: center;

			.search {
				border-radius: 12rpx;
				flex-grow: 1;
				height: 70rpx;
				display: flex;
				padding: 0 20rpx;
				align-items: center;
				background: #f5f5f5;
			}

			text {
				display: inline-flex;
				font-size: 24rpx;
				margin-left: 16rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}

		.select_t {
			padding: 22rpx 40rpx;
			width: 100vw;
			background: #ffffff;
			display: flex;
			border-bottom: 1rpx solid #eeeeee;

			.select_col {
				box-sizing: border-box;
				min-width: 152rpx;
				margin-right: 20rpx;
				height: 46rpx;
				background: #f2f2f2;
				border-radius: 24rpx;
				font-size: 24rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #333333;
				@include flexCenter;
			}

			.select_t_ac {
				background: rgba(68, 217, 75, 0.1);
				border: 1rpx solid #44d94b;
				color: #44d94b;
			}
		}
	}

	.meter_list{
		padding: 20rpx;
		padding-top: 200rpx;
	}

  .Water_record{
    position: relative;
    width: 100%;
  }
</style>
